<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div class="box">
            <div class="top">
                <span class="title">电影排行</span>
                <ul class="tabs">
                    <li :class="{active : active}" v-on:mouseover="toggleAction('hit')">热播</li>
                    <li :class="{active : !active}" v-on:mouseover="toggleAction('classic')">经典</li>
                </ul>
            </div>
            <component :is="current" :hitmovie="hitmovie" :classicmovie="classicmovie"></component>
        </div>
    </div>


</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            active: true,
            current: 'hit',
            hitmovie: [
                { name: '终结者5', star: '阿诺德·施瓦辛格' },
                { name: '飓风营救', star: '连姆·尼森' },
                { name: '我是传奇', star: '威尔·史密斯' },
                { name: '一线声机', star: '杰森·斯坦森' },
                { name: '罗马假日', star: '格里高利·派克' },
                { name: '史密斯夫妇', star: '布拉德·皮特' },
                { name: '午夜邂逅', star: '克里斯·埃文斯' },
            ],
            classicmovie: [
                { name: '机械师2:复活', star: '杰森·斯坦森' },
                { name: '变形金刚', star: '希亚·拉博夫' },
                { name: '暮光之城', star: '克里斯丁·斯图尔特' },
                { name: '怦然心动', star: '玛德琳·卡罗尔' },
                { name: '电话情缘', star: '杰西·麦特卡尔菲' },
                { name: '超凡蜘蛛侠', star: '安德鲁·加菲尔德' },
                { name: '雷神', star: '克里斯·海姆斯沃斯' },
            ],
        },
        methods: {
            toggleAction: function (value) {
                this.current = value;
                value == 'hit' ? this.active = true : this.active = false;
            }
        },
        components: {
            hit: {
                props: ['hitmovie'],
                template: `<div class="main"><div v-for="(item,index) in hitmovie">
                    <span>{{++index}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.star}}</span></div></div>`
            },
            classic: {
                props: ['classicmovie'],
                template: `<div class="main"><div v-for="(item,index) in classicmovie">
                    <span>{{++index}}</span>
                    <span>{{item.name}}</span>
                    <span>{{item.star}}</span></div></div>`
            }

        }
    })
</script>

</html>